import React, { useState, useEffect } from "react";

import "./List.scss";
import Swiper from "./componens/Swiper";
import Recommd from "./componens/Recommd";
import City from "./componens/City";
import House from "./componens/House";
import * as api from "api/index";
import Footer from "components/Footer";

function List() {
  // 风景推荐列表
  let [sceneList, setSceneList] = useState([]);
  const getSceneList = () => {
    api.$houseScene().then((res) => {
      setSceneList(res.result);
    });
  };
  useEffect(getSceneList,[]);

  //   城市
  let [cityList, setCityList] = useState([]);
  const getCityList = () => {
    api.$houseCity().then((res) => {
      setCityList(res.result);
    });
  };
  useEffect(getCityList,[]);

  // 房子列表
  let [houseList, setHouseList] = useState([]);
  const getHouseList = () => {
    api.$houseList().then((res) => {
      setHouseList(res.result);
    });
  };
  useEffect(getHouseList,[]); 

  return (
    <div className="house-index">
      {/* 轮播图 */}
      <Swiper />

      {/* 推荐 */}
      <Recommd sceneList={sceneList} />

      {/* 城市 */}
      <City cityList={cityList}/>

      {/* 列表 */}
      <House houseList={houseList}/>

      <Footer name="home"/>
    </div>
  );
}

export default List;
